﻿@{
    ViewBag.Title = "客户端A";
}

<!DOCTYPE html>
<html>
<head>

    <title>客户端A</title>
         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
    <script src="http://47.92.141.30:8080/signalr/hubs"></script>
    <style type="text/css">
        .container
        {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }

        .option
        {
            background-color: #b6ff00;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }

        .chose
        {
            background-color: #ff6a00;
        }
    </style>
</head>
<body>
    <div style="padding-left: 20px">
        <a id="chose_all" class="chose" href="javascript:void(0);">全部</a>
        <a id="chose_siliao" href="javascript:void(0);">密语</a><span id="siliao_notice"></span>
    </div>

    <div class="container" id="all">
        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>
    <div class="container" id="siliao" style="display:none"> 

        <ul id="discussion_siliao"></ul>
    </div>
    <div class="option">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="发送" />
        <input type="button" id="exsit" value="退出" />
        <span>当前在线人数:<span id="onlineCount">1</span></span>
    </div>

    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        var _tempCid = "";
        var _tempUserName = "";
        //线上地址http://47.92.141.30:8080/signalr
        $(function () {
            $.connection.hub.url = "http://47.92.141.30:8080/signalr";
            var chat = $.connection.myHub;
            var chat_oher = $.connection.oherHub;
            //addMessage对应pub类中的addMessage方法，chat.client.xxx相当于服务器调用Clients.All.addMessage给所有当前连接的用户发送消息，所有客户端都能接收到。           
            chat.client.addMessage = function (msgmodel) {
                var encodedName = $('<div />').text(msgmodel.Nick).html();
                var encodedMsg = $('<div />').text(msgmodel.Msg).html();
                // Add the message to the page.
                $('#discussion').append('<li><a href="javascript:void(0);" toid="' + msgmodel.ConnectedId + '" name="userinfo">' + encodedName
                    + '</a>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            //pub类定义的针对当前连接用户发送的消息
            chat.client.Receive = function (msg) {
                $('#discussion').append('<li><strong>' + msg
                    + '</strong></li>');
            }
            //系统消息
            chat.client.addMessage_system = function (msg)
            {
                $('#discussion').append('<li><strong><font color="green">' + msg
               + '</font></strong></li>');
            }

            //chat_oher.client.Receive = function (msg) {
            //    $('#discussion').append('<li><strong>' + msg
            //    + '</strong></li>');
            //}
            //在线人数
            chat.client.NotciceUserCount = function (msg) {
                $("#onlineCount").text(msg);
            }

            //接收私聊消息
            chat.client.ReceiveMsg = function (msgModel) {
                var encodedName = $('<div />').text(msgModel.Nick).html();
                var encodedMsg = $('<div />').text(msgModel.Msg).html();
                // Add the message to the page.
                $('#discussion_siliao').append('<li><a href="javascript:void(0);" toid="' + msgModel.ConnectedId + '" name="userinfo">' + encodedName
                    + '</a>对你说:&nbsp;&nbsp;<font color="red">' + encodedMsg + '</font></li>');
                //提示有私聊消息
                if ($("#siliao").css("display") == "none") {//判断是否不在私聊窗口下，
                    $("#siliao_notice").html("<font color='red'>有私密消息</font>");
                }
                
            }

            $('#displayname').val(prompt('输入你的昵称:', ''));

            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                chat.server.vilidate($('#displayname').val());

                $('#sendmessage').click(function () {
                    //推送到pub类的send方法，send方法又广播
                    //判断是否是私聊
                    if ($('#message').val().indexOf(":") > -1) {
                        if ($('#message').val().split(':').length > 1) {
                            var toMsg = $('#message').val().split(':')[1];
                            chat.server.sendTo(toMsg, _tempCid);
                            $('#discussion_siliao').append('<li>你对<a>' + _tempUserName
                   + '</a>说:&nbsp;&nbsp;<font color="red">' + toMsg + '</font></li>');
                            $('#message').val('').focus();
                        }
                    } else {
                        chat.server.send($('#displayname').val(), $('#message').val());
                        $('#message').val('').focus();
                    }
                    
                });

                $(document).on('click', '#exsit', function () {
                    chat.server.outExsit();
                })

                $("#chose_all").click(function () {
                    
                    $("#all").show();
                    $(this).addClass("chose");
                    $("#chose_siliao").removeClass("chose");
                    $("#siliao").hide();
                })
                $("#chose_siliao").click(function () {
                    $("#siliao").show();
                    $(this).addClass("chose");
                    $("#chose_all").removeClass("chose");
                    $("#all").hide();
                    $("#siliao_notice").html("");
                })
                $(document).on('click','a[name="userinfo"]', function () {
                    $("#message").val("@Html.Raw("@")" + $(this).text() + ":");
                    _tempCid = $(this).attr("toid");
                    _tempUserName = $(this).text();
                    $("#message").focus();
                })
               
            });
            
        });
    </script>
</body>
</html>
